<template>
  <view class="detail-container" style="margin-top: -8rpx">
    <view class="tab-wrapper">
      <ve-tabs :actived="tabIndex" :list="tabs" @change="tabsChange"></ve-tabs>
    </view>
    <!-- 普通版电子合同 -->
    <commonContract
      v-if="tabIndex == 0"
      :orderId="orderId"
      :orderType="orderType"
      :contractPayType="contractPayType"
      :permissionPrefix="permissionPrefix"
      @ok="getContractNumFn"
    />
    <!-- 付费版电子合同 -->
    <payContract
      v-if="tabIndex == 1"
      :orderId="orderId"
      :orderType="orderType"
      :contractPayType="contractPayType"
      :permissionPrefix="permissionPrefix"
      @ok="getContractNumFn"
    />
    <!-- 线下合同 -->
    <lineContract
      v-if="tabIndex == 2"
      :orderId="orderId"
      :orderType="orderType"
      :contractPayType="contractPayType"
      :permissionPrefix="permissionPrefix"
      @ok="getContractNumFn"
    />
  </view>
</template>

<script setup>
  import { ref, computed, watch } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import commonContract from './common-contract.vue'
  import payContract from './pay-contract.vue'
  import lineContract from './line-contract.vue'
  import { getContractNumAPI, getLongContractNumAPI } from '@/api/order/contract'

  const props = defineProps({
    orderId: [String, Number],
    orderType: {
      type: String,
      default: '', //  2短租 3长租
    },
    contractIndex: {
      type: Number,
      default: 0,
    },
    permissionPrefix: String,
  })

  // 合同数量集合
  let contractNumObj = ref({
    freeCount: 0,
    payCount: 0,
    offlineCount: 0,
  })
  // 合同类型(普通，付费，线下)
  const contractPayType = ref()

  const tabs = computed(() => {
    let arr = []
    if (props.orderType == '2') {
      arr = [
        { label: '普通版电子合同', value: 0, num: contractNumObj.value.freeCount || '0' },
        { label: '付费版电子合同', value: 1, num: contractNumObj.value.payCount || '0' },
      ]
    } else {
      arr = [
        { label: '普通版电子合同', value: 3, num: contractNumObj.value.freeCount || '0' },
        { label: '付费版电子合同', value: 1, num: contractNumObj.value.payCount || '0' },
        { label: '线下合同', value: 2, num: contractNumObj.value.offlineCount || '0' },
      ]
    }
    return arr
  })
  let tabIndex = ref(0)

  const tabsChange = (index, val) => {
    tabIndex.value = index
    contractPayType.value = val.value
  }

  watch(
    () => props.contractIndex,
    (newVal) => {
      // 转成数值型
      newVal = Number(newVal)
      tabsChange(newVal, tabs.value[newVal])
    },
    { immediate: true },
  )

  const getContractNumFn = async () => {
    let fetch = props.orderType == 2 ? getContractNumAPI : getLongContractNumAPI
    let params =
      props.orderType == 2
        ? {
            orderId: props.orderId,
            orderType: props.orderType == 2 ? 1 : 2,
          }
        : {
            id: props.orderId,
          }
    const res = await fetch(params)
    contractNumObj.value = res.result
  }
  onLoad(() => {
    getContractNumFn()
    uni.$on('refreshNumData', () => {
      getContractNumFn()
    })
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    overflow-y: auto;
    .tab-wrapper {
      width: 100%;
      background-color: #fff;
      padding: 16rpx 24rpx 24rpx 24rpx;
    }
    :deep(.ve-tabs) {
      border: none;
      height: 64rpx;
    }
    :deep(.is-actived) {
      font-size: 28rpx !important;
      background: #f2f3f5;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
    :deep(.ve-tabs-item) {
      font-size: 28rpx !important;
      line-height: 64rpx;
      .badge {
        top: 0;
      }
    }
    :deep(.ve-tabs-bar) {
      display: none;
    }
  }
</style>
